::ng-deep :root {
  --ti-pathField-height: 26px;
  --ti-pathField-back-width: var(--ti-pathField-height);
}

:host {
  display: block;
}

.ti3-pathField-container {
  display: flex;
  height: var(--ti-pathField-height);
  line-height: var(--ti-pathField-height);
  border: 1px solid var(--ti-common-color-line-normal);
  border-radius: var(--ti-common-border-radius-normal);
  align-items: center;
  position: relative;
}

.ti3-pathField-backIcon {
  display: block;
  width: var(--ti-pathField-back-width);
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  border-right: 1px solid var(--ti-common-color-line-normal);
  box-sizing: border-box;
  &:hover {
    color: var(--ti-common-color-bg-emphasize);
  }
}
.ti3-pathField-items {
  display: flex;
  flex: 1;
  height: var(--ti-pathField-height);
  padding: 0 var(--ti-common-space-10);
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  .ti3-pathField-item {
    &:not(:last-child) {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      color: var(--ti-common-color-text-weaken);
      cursor: pointer;
      &:hover .ti3-pathField-item-label {
        color: var(--ti-common-color-text-highlight);
      }
    }
    &:last-child {
      width: 100%;
      font-weight: bold;
      .ti3-pathField-item-label {
        max-width: none;
      }
      .ti3-pathField-item-divid {
        display: none;
      }
    }
  }
}

.ti3-pathField-item-label {
  max-width: 160px;
}
.ti3-pathField-item-divid {
  margin: 0 var(--ti-common-space-base);
}

.ti3-pathField-Editor {
  width: calc(100% + 2px);
  position: absolute;
  left: -1px;
  input {
    width: 100%;
  }
}
